<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/babel">
        /*var WebSite = React.createClass({
            getDefaultProps:function(){
                return {
                    name:"菜鸟教程",
                    site:"http://www.runoob.com"
                };
            },
            render: function() {
                return (
                    <div>
                        <Name name={this.props.name} />
                        <Link site={this.props.site} />
                    </div>
                );
            }
        });

        var Name = React.createClass({
            render: function() {
                return (
                        <h1>{this.props.name}</h1>
                );
            }
        });

        var Link = React.createClass({
            render: function() {
                return (
                        <a href={this.props.site}>
                            {this.props.site}
                        </a>
                );
            }
        });

        ReactDOM.render(
            <WebSite  />,
            document.getElementById('example')
        );*/
      /* var HelloWorld = React.createClass({
           getDefaultProps:function(){
               return {
                   name:"Runoob",
                   age:15
               };
           },
           render:function(){
               return (
                       <div>
                       <p>Hello {this.props.name}</p>
                        <h3>{this.props.age}</h3>
                        </div>
               );
           }
       });

       ReactDOM.render(
            <HelloWorld />,
               document.getElementById('example')
       );*/


       /*var LikeButton = React.createClass({
           getInitialState: function() {
               return {liked: false};
           },
           handleClick: function(event) {
               this.setState({liked: !this.state.liked});
           },
           render: function() {
               var text = this.state.liked ? '喜欢' : '不喜欢';
               return (
                       <p onClick={this.handleClick}>
                        你<b>{text}</b>我。点我切换状态。
                        </p>
               );
           }
       });

       ReactDOM.render(
                <LikeButton />,
               document.getElementById('example')
       );*/

        /*{
         names.map((name)=><div>Hello ,{name}</div>)
         }*/
        var names = ['Tom','Jack','Li li'] ;

        ReactDOM.render(
                <div>
                    {names}
                </div>,
                document.getElementById('example')
        );
    </script>
</body>
</html>